<!--登录页-->
<template>
  <div style="height: 100vh; background-image: linear-gradient(135deg,#1352f2,#3c82f5); overflow: hidden">
    <el-container style="padding: 30px;">
      <el-header>
        <el-row gutter="10">
          <el-col :span="3"><img src="/imgs/login/logo.png" style="height: 50px"> </el-col>
          <el-col :span="1"><img src="/imgs/login/auto.png" style="height: 50px"></el-col>
          <el-col :span="1"><img src="/imgs/login/verticalLine.png" style="height: 50px"></el-col>
          <el-col :span="19"><span style="color: #fff; font-size: 30px; font-weight: bold;">智慧车辆运营管理系统</span></el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row gutter="40">
          <el-col :span="16"><img src="/imgs/login/bg.png" style="width: 100%; margin-top: 60px"></el-col>
          <el-col :span="8">
            <el-card style="margin-top: 80px">
              <h3  style="text-align: center">用户登录</h3>
              <el-form label-position="top" >
                <el-form-item label="用户名" >
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                  <el-row :gutter="20">
                    <el-col :span="12">
                  <el-input placeholder="请输入验证码" style="margin-top: 10px"  v-model="user.code"></el-input>
                    </el-col>
                    <el-col :span="12"><img :src="captchaSrc" @click="getCaptcha" style="width: 100px"></el-col>
                  </el-row>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
              <div style="text-align: center; color: #666; font-size: 14px; padding: 10px 0;">
                (体验账号:Tom 密码:123456)
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios, {create} from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const user = ref({
  username:'',
  password:'',
  code:''
});

const login = ()=>{
  // 回调函数，接收后端发回的响应体存入response对象内
  axios.post('http://localhost:8080/v1/user/login',user.value)
      .then((response)=>{
        if(response.data.code === 2000){//验证通过
          console.log(response.data);
          console.log(JSON.stringify(response.data.data));//利用JSON.stringify方法将json对象转为字符串
          ElMessage.success("登录成功捏!");
          //localStore只能存储字符串类型的键值对
          localStorage.setItem('user',JSON.stringify(response.data.data));
          router.push('/');//登录成功后转到首页，然后重定向到用户页
        }else if(response.data.code == 5004){//验证码未找到
          ElMessage.error('验证码过期了,请刷新！');
          getCaptcha;
        } else if(response.data.code == 5002){//验证码错误
          ElMessage.error('验证码错误,请重试！');
          user.value.code='';
          getCaptcha;
        } else {
          ElMessage.error("登录失败！");
          console.log(response.data);
          // 清空表单数据
          user.value = {username:'', password:''};
        }
      });
}
const getCaptcha=()=>{
  axios.get("http://localhost:8080/v1/user/cap")
      .then((response)=>{
        if (response.data.code == 2000){
          captchaSrc.value = response.data.data;
        }
      });
}

const captchaSrc = ref('');



    onMounted(()=>{
          getCaptcha();
    })





</script>


<style scoped>

</style>